<template>
  <div class="container">
    <div class="app-container">
      <div class="order-operate">
        <el-row class="opeate-tools" type="flex" justify="end">
          <el-button size="mini" type="primary" @click="$router.push('/order/detail')">添加订单</el-button>
          <el-button size="mini" @click="showExcelDialog = true">excel导入</el-button>
          <el-button size="mini">excel导出</el-button>
        </el-row>
        <!-- 表格组件 -->
        <el-table :data="list">
          <el-table-column prop="orderNumber" align="center" label="订单号" />
          <el-table-column prop="orderDate" label="订单日期" />
          <el-table-column prop="wholesalersRefNo" label="批发商编号" />
          <el-table-column prop="typeOfOrder" label="订单类型" />
          <el-table-column prop="quantity" label="货物数量" />
          <el-table-column prop="estimatedShippingDate" label="预计发货时间" />
          <el-table-column prop="shippingDate" label="发货时间" />
          <el-table-column label="操作" width="280px">
            <template>
              <el-button size="mini" type="text" @click="$router.push('/order/detail')">查看</el-button>
              <el-popconfirm title="确认删除该行数据吗？">
                <el-button slot="reference" style="margin-left:10px" size="mini" type="text">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row style="height: 60px" align="middle" type="flex" justify="end">
          <el-pagination
            layout="total,prev, pager, next"
            :total="total"
            :current-page="queryParams.page"
            :page-size="queryParams.pagesize"
          />
        </el-row>
      </div>
      <import-excel :show-excel-dialog.sync="showExcelDialog" />
    </div>
  </div>
</template>
<script>
import ImportExcel from './components/import-excel.vue'
export default {
  name: 'Order',
  components: {
    ImportExcel
  },
  data() {
    return {
      // 存储查询参数
      queryParams: {
        orderId: null,
        page: 1, // 当前页码
        pagesize: 10
      },
      total: 10, // 记录订单的总数
      // 接受查询到的订单数据
      list: [{
        id: '1',
        orderNumber: 'WL12665-250604-39245',
        orderDate: '2025-05-23',
        typeOfOrder: 'Kippot',
        itemNumber: 'STN-223',
        quantity: 200,
        wholesalersRefNo: 'REF12345',
        estimatedShippingDate: '2025-06-30',
        eventDate: '2025-07-15',
        fullName: 'Dmitrij Belkin',
        size: '19 cm',
        telephone: '004915156024584',
        panel: 4,
        email: 'info@levinson-stiftung.de',
        shippingAddress: 'Am Neuen Palais 10, 14469 Potsdam, Germany',
        buttonColor: 'No',
        stitchingColor: 'No double stitching',
        rimColor: 'default',
        liningColor: 'White',
        fringeColor: 'None',
        stringColor: 'Black',
        clipsColor: 'silver',
        sellersTag: 'DavidKippot',
        outsideEmbroidery: 'NATHAN PETER LEVINSON STIFTUNG',
        insidePrintings: 'Logo and name',
        embOrPr: 'Embroidery',
        embroidery: 'Logo on front',
        printings: 'Name on back',
        seeRefColor: 'Refer to sample',
        model: 'Standard',
        seeAllInside: 'Check Sheet2',
        insideType: 'Label',
        printingsOnLabelColor: 'Black',
        font: 'Arial',
        specialRequest: 'Send photo for approval before batch production',
        orderStatus: 'Processing',
        shippingDate: '2025-06-28',
        courier: 'DHL',
        trackingNumber: '1234567890',
        orderRemarks: 'High priority order, ensure timely delivery',
        itemPhoto: 'https://example.com/kippot_sample.jpg'
      }, {
        id: '2',
        orderNumber: 'WL12665-250604-39288',
        orderDate: '2025-05-30',
        typeOfOrder: 'Kippot',
        itemNumber: 'STN-223',
        quantity: 350,
        wholesalersRefNo: 'REF12345',
        estimatedShippingDate: '2025-06-30',
        eventDate: '2025-07-15',
        fullName: 'Dmitrij Belkin',
        size: '19 cm',
        telephone: '004915156024584',
        panel: 4,
        email: 'info@levinson-stiftung.de',
        shippingAddress: 'Am Neuen Palais 10, 14469 Potsdam, Germany',
        buttonColor: 'No',
        stitchingColor: 'No double stitching',
        rimColor: 'default',
        liningColor: 'White',
        fringeColor: 'None',
        stringColor: 'Black',
        clipsColor: 'silver',
        sellersTag: 'DavidKippot',
        outsideEmbroidery: 'NATHAN PETER LEVINSON STIFTUNG',
        insidePrintings: 'Logo and name',
        embOrPr: 'Embroidery',
        embroidery: 'Logo on front',
        printings: 'Name on back',
        seeRefColor: 'Refer to sample',
        model: 'Standard',
        seeAllInside: 'Check Sheet2',
        insideType: 'Label',
        printingsOnLabelColor: 'Black',
        font: 'Arial',
        specialRequest: 'Send photo for approval before batch production',
        orderStatus: 'Processing',
        shippingDate: '2025-06-28',
        courier: 'DHL',
        trackingNumber: '1234567890',
        orderRemarks: 'High priority order, ensure timely delivery',
        itemPhoto: 'https://example.com/kippot_sample.jpg'
      }],
      showExcelDialog: false // 控制excel的弹层显示和隐藏
    }
  },
  created() {
  },
  methods: {
    confirmDel() {
      alert('点击了删除按钮')
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #fff;
  display: flex;
  .order-operate {
    flex: 1;
    padding: 20px;
    .opeate-tools {
      margin:10px ;
    }
    .orderNumber {
      height: 30px;
      width: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 50%;
      color: #fff;
      background: #04C9BE;
      font-size: 12px;
      display:inline-block;
    }
  }
}

</style>
